<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { RouterView } from 'vue-router'
import { TranslationService } from './services/translationService'
import { useLanguageStore } from './stores/language'

const { locale } = useI18n()
const languageStore = useLanguageStore()

const changeLanguage = async (lang: string) => {
  locale.value = lang
  languageStore.setLanguage(lang)
  
  const mainContent = document.querySelector('.main-content')
  if (mainContent) {
    await TranslationService.translateElement(mainContent as HTMLElement, lang)
  }
}
</script>

<template>
  <nav class="main-nav">
    <router-link to="/">首页</router-link>
    <router-link to="/blogs">博客列表</router-link>
  </nav>
  
  <div class="language-switcher">
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('id')">Bahasa Indonesia</button>
  </div>
  
  <main class="main-content">
    <RouterView />
  </main>
</template>

<style>
.main-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(45, 45, 45, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.main-nav a {
  color: #d0d0d0;
  text-decoration: none;
  padding: 5px 15px;
  margin: 0 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.main-nav a:hover,
.main-nav a.router-link-active {
  background: #404040;
  color: #fff;
}
</style>

<style>
.language-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(45, 45, 45, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.language-switcher button {
  margin: 0 5px;
  padding: 8px 15px;
  background: #404040;
  color: #d0d0d0;
  border: 1px solid #505050;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.language-switcher button:hover {
  background: #505050;
  color: #fff;
}

/* 添加主体内容布局样式 */
.main-content {
  max-width: 1200px;
  margin: 80px auto 20px;
  padding: 0 20px;
  min-height: calc(100vh - 100px);
}

/* 调整body样式 */
body {
  background-color: #1a1a1a;
  color: #e0e0e0;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
</style>
